<template>
  <div>
    <div id="echars-matur"
         style="width:90%;height: 430px; margin:10px auto 0 auto;">
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getMaturityStats } from '@/api/maintenance'
export default {
  props: {
    searchForm: {
      type: Object
    },
    activeName: {
      type: String
    }
  },
  data() {
    return {
      options: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['自签额', '协签额', '自签项目', '协签项目']
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额',
            min: 0,
            interval: 200,
            axisLabel: {
              formatter: '{value} 万'
            }
          },
          {
            type: 'value',
            name: '项目',
            min: 0,
            interval: 10,
            axisLabel: {
              formatter: '{value} 个'
            }
          }
        ],
        series: [
          {
            name: '自签额',
            type: 'bar',
            stack: '自签',
            data: []
          },
          {
            name: '协签额',
            type: 'bar',
            stack: '自签',
            data: []
          },
          {
            name: '自签项目',
            type: 'line',
            yAxisIndex: 1,
            data: []
          },
          {
            name: '协签项目',
            type: 'line',
            yAxisIndex: 1,
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    if (this.activeName === 'maturity') this.getData()
  },
  methods: {
    // 请求数据
    getData() {
      getMaturityStats(this.searchForm).then(res => {
        if (res.data.success) {
          const result = res.data.data

          this.options.xAxis[0].data = []
          this.options.series[0].data = []
          this.options.series[1].data = []
          this.options.series[2].data = []
          this.options.series[3].data = []
          // 初始化图标轴与数据
          result.forEach(item => {
            this.options.xAxis[0].data.push(item.maturity)
            this.options.series[0].data.push(item.since)
            this.options.series[1].data.push(item.agreementd)
            this.options.series[2].data.push(item.sinceCount)
            this.options.series[3].data.push(item.agreementdCount)
          })

          // 合并数组
          let _dataAmount = this.options.series[0].data.concat(this.options.series[1].data)
          // 取数组最大值除10,作为Y轴间隔
          this.options.yAxis[0].interval = Math.round(Math.max(..._dataAmount) / 5, 0)
          // 合并数组
          let _dataCount = this.options.series[2].data.concat(this.options.series[3].data)
          // 取数组最大值除10,作为Y轴间隔
          this.options.yAxis[1].interval = Math.round(Math.max(..._dataCount) / 5, 0)
          // 数据加载完成后渲染图表
          var myChartMatur = echarts.init(document.getElementById('echars-matur'), 'macarons')
          myChartMatur.setOption(this.options)
        }
      })
    }
  },
  watch: {
    activeName() {
      if (this.activeName === 'maturity') this.getData()
    }
  }
}
</script>
